<template>
  <div class="adviceFeedback" >
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :append-to-body="true"
      title="感谢您的宝贵建议！"
      class="advicedialog"
    >
      <div class="form">
        <el-form ref="form" :model="Form">
          <el-form-item >
            <el-input
              v-model="Form.textarea"
              :rows="7"
              type="textarea"
              placeholder="请问有什么可以帮助您的吗?"
              maxlength="300"
              show-word-limit
              style="width:100%"></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="submit">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-button type="primary" icon="el-icon-edit" size="small" round @click="dialogVisible = true">建议</el-button>
  </div>
</template>
<script>
import { AdviceFeedback } from '@/api/advice'
export default {
  data() {
    return {
      Form: {
        textarea: ''
      },
      dialogVisible: false // 控制大页面的隐藏
    }
  },

  methods: {

  //* ******控制弹窗************************************* */
    handleClose(done) {
      this.$confirm('确定关闭吗').then(() => {
        // function(done)，done 用于关闭 Dialog
        done()
      }).catch(() => {
      })
    },
    //* ********提交到后台********************************************* */
    submit() {
      AdviceFeedback({
        adviceStr: this.Form.textarea
      }).then(() => {
        this.$message({
          type: 'success',
          message: '您的建议我们收到啦！'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '欢迎您下次建议'
        })
      })
    }
  }
}
</script>
<style scoped>
.adviceFeedback{
  position: fixed;
  right: -40px;
  bottom: 50px;
}
.el-button--primary{
  color: #FFF;
  background-color: rgb(4, 81, 165);
  border-color: rgb(4, 81, 165);
}
.el-button--primary:hover {
  background: rgb(28, 122, 223);
  border-color: rgb(28, 122, 223);
  transform: translateX(-29px);
  color: #fff;
  height: auto;
}
.btn{
  float:right;
  margin-bottom: 1%;
}
.form{
margin-top: -4%;
margin-bottom: 7%;
}
/*修改 Dialog 右上角关闭按钮*/

.advicedialog>>>.el-dialog__headerbtn{
  height: 25px;
   width: 25px;
}
 .advicedialog>>>.el-dialog__headerbtn:hover {

  background: #c3d3e1 !important;
  border-radius: 10%;

 }
</style>
